<template>
  <div class="about">
    <h2>{{data.title}}</h2>
    <el-row class="content">
      <div class="markdown-body" v-html="data.content" v-highlight></div>
    </el-row>
  </div>
</template>

<script>
import {getAbout} from '@/api/api'
import '../assets/plugins/hljs'
import marked from 'marked'
import 'highlight.js/styles/monokai.css'
import hljs from 'highlight.js'
import {addCodeBtn} from '../assets/plugins/mavon'
import '../assets/style/code.styl'
hljs.highlightCode = function () { 
	//自定义highlightCode方法，将只执行一次的逻辑去掉
	let blocks = document.querySelectorAll('pre code');
  [].forEach.call(blocks, hljs.highlightBlock);
};


let _this
export default {
  name: 'About',
  data () {
    return {
      data:[]
    }
  },
  watch: {
    data: function() {
        this.$nextTick(() => { 
            addCodeBtn()
        });
    }
  },
  created(){
    _this = this;
    _this.getAbout();
    hljs.highlightCode()
  },
  methods:{
    getAbout() {
      getAbout().then((res => {
        _this.data = res.data
        _this.data.content = marked(_this.data.content)
      })).catch(error => {
        _this.$message({type: 'error', message: '加载失败!', showClose: true})
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='stylus' scoped>
.about
  width 65%
  padding 0 20px
  box-sizing border-box
  h2
    line-height 100px
    color #555
    font-weight 500
    text-align center
  .content
    color #555
    line-height 2.5
    font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
</style>
